import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Modal extends Component {
  render () {
    return ReactDOM.createPortal(
      <div style={{ 
        position: 'fixed',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'

       }}>
        <div style={{ 
          width: '50%',
          minHeight: 500,
          backgroundColor: '#fff'
         }}>
          <header>
            { this.props.header }
            <span
              style={{ float: 'right'}}
              onClick={ () => this.props.onClose() }
            >×</span>
          </header>
          <div>
            { this.props.content }
          </div>
        </div>
      </div>,document.getElementsByTagName("body")[0]
    )
  }
}
